<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class = "box"></div>
<script>

    let box = document.querySelector(".box")

    let length = 20

    let imgArr = []

    for(let i = 0;i < length;i++){ //这里的请求图片的操作就是异步操作，我们需要等请求完所有图片，加载成功之后，才能对其进行操作
        let img = document.createElement("img")
        img.src = `./img/01(${i+1}).jpg`
        box.appendChild(img)
        imgArr.push(img) //循环将20个图片添加到数组中
    }

    //想要获取每个img标签的宽度和高度

    //怎么样把每个元素的宽高都同时打印出来？就是等所有图片都加载完成之后，才去打印它的宽高，用Promise.all

    let promiseArr = []

    imgArr.forEach(img => {
        //img图片已经加载完成，我才能访问它的真实宽高
        let p = new Promise(resolve => {
            img.onload = function (){
                resolve({
                    width:img.width,
                    height:img.height
                })
            }
        })
        promiseArr.push(p) //将promise对象p添加到数组当中
    })

    Promise.all(promiseArr)
        .then(list => { //在Promise.all中，只有promiseArr数组中每一项都成功触发resolve（即imgArr里面每一项img都触发），才会执行then操作
            console.log(list) //这个list就是promiseArr数组里面的每一项图片的宽高数据
        })


    //如果我一共请求20张一模一样的图片，但是我只要得到其中一张就可以了，并且得到那一张之后就把最开始得到的那一张图片及其编号发送出去，需要怎么做？
    //以下是在刚刚原来代码的基础上进行修改，这个操作和上面的操作的业务需求是不一样的，是另一个新需求
    imgArr.forEach((img,index) => { //在forEach中再接收一个参数index
        //img图片已经加载完成，我才能访问它的真实宽高
        let p = new Promise(resolve => {
            img.onload = function (){
                resolve({
                    index:index, //属性index:对应index的编号
                    width:img.width,
                    height:img.height
                })
            }
        })
        promiseArr.push(p) //将promise对象p添加到数组当中
    })

    Promise.race(promiseArr) //把原来的.all改成.race就行了，这样就能知道最先加载出来的图片编号及其宽高
        .then(list => { //在Promise.all中，只有promiseArr数组中每一项都成功触发resolve（即imgArr里面每一项img都触发），才会执行then操作
            console.log(list) //这个list就是promiseArr数组里面的每一项图片的宽高数据
        })

    /*
    * 加载到页面中的图片，有两种访问途径：
    *   1.从缓存中寻找，如果在缓存中找到了，就直接加载图片
    *   2.如果在缓存中找不到，才真正地去请求，按ctrl + f5刷新，会强制更新缓存，不需要再缓存中找东西，直接进行请求
    *
    * */

</script>
</body>
</html>